<template>
  <div class="swiper"
       @mouseenter="close(true)"
       @mouseleave="close(false)">
    <div class="swiper-left">
      <div class="left-item">
        <ul class="left-list"
            ref="lList">
          <li v-for="(item, index) in swipers[0]"
              :key="index" @click ="itemClick(item)">



            <img :src="item.g_picture"
                 alt="">
          </li>

        </ul>
      </div>
    </div>
    <div class="swiper-right">
      <div class="right-top">
        <ul class="right-list"
            ref="rList1">
          <li v-for="(item, index) in swipers[1]"
              :key="index" @click ="itemClick(item)">
            <img :src="item.g_longImg"
                 :alt="item.g_longImg">
          </li>
        </ul>
      </div>

      <div class="right-item">
        <ul class="right-list"
            ref="rList2">
          <li v-for="(item, index) in swipers[2]"
              :key="index" @click ="itemClick(item)">
            <img :src="item.g_picture">
          </li>
        </ul>
      </div>
      <div class="right-item">
        <ul class="right-list"
            ref="rList3">
          <li v-for="(item, index) in swipers[3]"
              :key="index" @click ="itemClick(item)">
            <img :src="item.g_picture">
          </li>
        </ul>
      </div>

    </div>
    <div class="last"
         @click="next(-1)">
      <i class="iconfont icon-left"></i>
    </div>
    <div class="next"
         @click="next(1)">
      <i class="icon-xiangyou iconfont"></i>
    </div>
    <div class="topBar">
      <div class="discount">
        <div class="iconfont icon-libao"></div>
        <p>专享优惠</p>
      </div>
      <div class="go-user">
        <div class="iconfont icon-yonghu1"></div>
        <p>我的众筹</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner } from 'server/front_k.js'
import { splitArray } from '@/common/public.js'
export default {
  data() {
    return {
      swipers: [],
      timeoutIndex: -1,
      // count:5
      swiperIndex: 0,
      list: [],
      isAuto: true
    }
  },
  methods: {
    timeout() {
      this.timeoutIndex = setInterval(() => {
        this.swiperIndex++
        this.move()
      }, 3000)
    },
    itemClick(item){
    
      this.$router.push({
        path:'/front/detail',
        query:{
          gid:item.gid
        }

      })

    },

    move() {
      if (this.swiperIndex === 5) {
        // lList.style.transition = `0s`
        this.list.forEach(item => (item.style.transition = `0s`))
        this.swiperIndex = -1
      } else {
        // lthis.style.transition = `1s`
        this.list.forEach(item => (item.style.transition = `0.5s`))
      }
      // lthis.style.left = `-${this.swiperIndex}00%`
      this.list.forEach(item => (item.style.left = `-${this.swiperIndex}00%`))
    },
    next(num) {
      this.swiperIndex += num
      this.move()
    },
    _getBanner() {
      getBanner().then(res => {
        // 将返还的数组 按照 每份5个 分配为4个数组

        const banners = splitArray(res.data, 5)
        this.swipers = banners
      })
    },
    close(flag) {
      if (flag) {

        clearInterval(this.timeoutIndex)

        
      } else {

        this.timeout()
      }
    }
  },
  mounted() {
    this.list.push(this.$refs.lList)
    this.list.push(this.$refs.rList1)
    this.list.push(this.$refs.rList2)
    this.list.push(this.$refs.rList3)
    this.timeout()
  },
  created() {
    this._getBanner()
  }
}
</script>

<style scoped>
.swiper {
  height: 500px;
  margin-top: 40px;
  /* border: 1px solid #ccc; */
  display: flex;
  position: relative;
}
.swiper-left,
.swiper-right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.right-top {
  width: 100%;
  height: 50%;
  /* border:1px solid #ccc ; */
  position: relative;
  overflow: hidden;
}
.right-item {
  width: 50%;
  height: 50%;
}
.right-list img,
.left-item,
.swiper-left img {
  width: 100%;
  height: 100%;
}

.left-item,
.right-item {
  position: relative;
  overflow: hidden;
}
.left-list,
.right-list {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 500%;
  display: flex;
  transition: 1s;
}
.left-list > li,
.right-list > li {
  width: 20%;
  height: 100%;
}

.last,
.next {
  position: absolute;
  height: 50px;
  width: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  top: 50%;
  /* left:0; */
  transform: translate(0, -50%);
  cursor: pointer;
  display: none;
  text-align: center;
  line-height: 50px;
}
.next i,
.last i {
  font-size: 32px;
  color: rgba(255, 255, 255, 0.6);
}
.last {
  left: 0;
}
.next {
  right: 0;
}
.swiper:hover .next,
.swiper:hover .last {
  display: block;
}
.topBar {
  width: 140px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: -20px;
  left: 20px;
  /* border: 1px solid red; */
}
.topBar > div {
  width: 65px;
  height: 60px;
  background-color: #fe5059;
  color: white;
  text-align: center;

  flex-wrap: wrap;
  font-size: 12px;
  cursor: pointer;
}
.topBar .iconfont {
  font-size: 20px;
  /* margin-top: 15px; */
  margin: 10px 0;

}
.topBar .go-user {
  background-color: #19dce4;
}
</style>